import { useState } from 'react';
import { Button, Space, Row, Col, Table } from 'antd';
import { PAGINATION_CONFIG } from '@/constants';
import { queryAskList } from '@/services/ask'
import { useRequest } from 'ahooks';
import type { ColumnsType } from 'antd/es/table/interface';
import dayjs from 'dayjs';

const AppUserPage: React.FC = () => {
  const [searchParams, setSearchParams] = useState<PaginationParams>({
    pageNum: 1, pageSize: 10, 
  })
  const list = useRequest(() => queryAskList(searchParams), {
    refreshDeps: [searchParams],
  })

  const columns: ColumnsType<Ask.Entity> = [
    {
      title: '申请人',
      dataIndex: 'username',
      width: 120,
      render: val => val || '--'
    },
    {
      title: '联系方式',
      dataIndex: 'telephone',
      width: 100,
    },
    {
      title: '实地考察',
      dataIndex: 'intence',
      width: 120,
      render: val => val === 1 ? '有意向' : '无意向',
    },
    {
      title: '意向城市',
      dataIndex: 'cityName',
      width: 120,
    },
    {
      title: '合作模式',
      dataIndex: 'workType',
      width: 160,
      render: (val, record) => {
        if (val === 1) {
          return '资金方'
        }
        if (val === 2) {
          return <div>
            <div>场地方</div>
            <div>场地：{(record.itemType || '其他').replace('提', '停')}</div>
          </div>
        }
        return <div>
          <div>资金方 + 场地方</div>
          <div>场地：{(record.itemType || '其他').replace('提', '停')}</div>
        </div>
      }
    },
    {
      title: '申请时间',
      dataIndex: 'createTime',
      width: 140,
      render: val => dayjs(val).format('YYYY-MM-DD HH:mm:ss'),
    },
  ]
  
  return (
    <div className='container'>
      <div className="card search-card">
        <div className="form-area">
          <Row gutter={[20, 20]}>
            <Col span={6}>
              <Space>
                <Button type='primary' onClick={() => setSearchParams({pageNum: 1, pageSize: searchParams.pageSize})}>查询</Button>
              </Space>
            </Col>
          </Row>
        </div>
      </div>
      <div className="card content-card">
        <Table<Ask.Entity>
          rowKey='id'
          loading={list.loading}
          dataSource={list.data?.data}
          columns={columns}
          scroll={{y: 700, x: 'max-content'}}
          pagination={{
            ...PAGINATION_CONFIG,
            current: searchParams.pageNum,
            pageSize: searchParams.pageSize,
            total: list.data?.totalCount || 0,
            onChange: (page, pageSize) => {
              setSearchParams({
                ...searchParams,
                pageNum: page === searchParams.pageNum ? 1 : page,
                pageSize,
              })
            }
          }}
        />
      </div>
    </div>
  );
};

export default AppUserPage;
